<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-30 20:21:42
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-31 11:34:22
 * @FilePath: \实训二PC\vue-project\src\components\PieRight.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div ref="PieLeft" class="chart"></div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import * as echarts from 'echarts';

const PieLeft = ref<HTMLElement | null>(null);

const BarLineChart = () => {
    if (PieLeft.value) {
        var myChart = echarts.init(PieLeft.value);
        // 图表配置项
        const option = {
            title: {
                text: '今日热门出发到达城市',
                x: 'center',
                y: 'top',
                top: '4%',
                textStyle: {
                    fontSize: 17, // 标题字体大小
                    color: "#1BA9BA"
                }
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'horizontal',// 设置图例水平布局
                align: 'auto', // 设置图例对齐方式（左、中、右）
                top: "14%",
                left: 'center',
                icon: 'circle', // 将系列标题前面的图标形状设置为圆形
                itemWidth: 12,
                textStyle: {
                    fontSize: 11,
                    width: 35,
                    padding: [20, 7],
                },
                data: ['三亚', '深圳', '北京', '上海', '武汉', '香港', '澳门', '成都', '桂林', '哈尔滨'],
            },
            color: ['#DE799B', '#FF8D41', '#d44343', '#84d36e', '#237a11', '#1BA9BA', '#67d1f6', '#679cf6', "#535fd8", '#ccc'],
            series: [
                {
                    name: '订单状态',
                    type: 'pie',
                    radius: ['45%', '70%'],
                    top: '20%',
                    data: [
                        { value: 36, name: '三亚' },
                        { value: 34, name: '深圳' },
                        { value: 3, name: '北京' },
                        { value: 3, name: '上海' },
                        { value: 3, name: '武汉' },
                        { value: 3, name: '香港' },
                        { value: 3, name: '澳门' },
                        { value: 3, name: '成都' },
                        { value: 3, name: '桂林' },
                        { value: 3, name: '哈尔滨' }
                    ],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    }
}
onMounted(() => {
    BarLineChart()
});
</script>

<style scoped lang="scss">
.chart {
    width: 100%;
    height: 100%;
}
</style> 